<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hello bootstrap</title>
    <!--    导入bootstrap的样式-->
    <link rel="stylesheet" href="component/bootstrap-3.4.1-dist/css/bootstrap.min.css" type="text/css">
    <style type="text/css">
        .biankuang {
            border: 5px solid blue;
            padding: 10px;
        }

        .ding {
            padding-top: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Ajax and Json 的实战案例</h1>
        <hr />
        <div>
            <!-- 操作步骤 -->
            <div class="col-md-4">
                <div class="biankuang">
                    <ul class="list-group">
                        <li class="list-group-item">1. 创建 XMLHttpRequest 对象</li>
                        <li class="list-group-item">2. 注册回调函数</li>
                        <li class="list-group-item">3. 建立与服务器的连接</li>
                        <li class="list-group-item">4. 发送请求</li>
                    </ul>
                </div>
                <div class="btn-group ding">
                    <button type="button" class="btn btn-primary">异步加载json数据</button>
                    <button type="button" class="btn btn-danger">清空数据</button>
                </div>
            </div>
            <!-- 存放表格数据 -->
            <div class="col-md-8">
                <table class="table table-striped">
                    <tr>
                        <th>序号</th>
                        <th>学员名</th>
                        <th>生日</th>
                        <th>性别</th>
                        <th>爱好</th>
                        <th>操作</th>
                    </tr>
                </table>
            </div>
        </div>
        <!--添加模态框代码-->
        <div class="modal fade" id="updatemodal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <!--            头部定义-->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">X</span>
                        </button>
                        <h4 class="modal-title">修改员工</h4>
                    </div>
                    <!--            体部定义-->
                    <div class="modal-body">
                        <!--                表单定义-->
                        <form action="#" name="updateForm" method="post" class="form-horizontal">
                            <div class="form-group has-success has-feedback">
                                <div class="col-md-3">
                                    <input readonly type="text" name="id" class="form-control" placeholder="ID">
                                </div>
                            </div>
                            <div class="form-group has-success has-feedback form-group">
                                <div class="col-md-3">
                                    <input type="text" name="name" class="form-control" placeholder="学员名">
                                </div>
                            </div>
                            <div class="form-group has-success has-feedback form-group">
                                <div class="col-md-3">
                                    <input type="text" name="birthday" class="form-control" placeholder="生日">
                                </div>
                            </div>
                            <div class="form-group has-success has-feedback form-group">
                                <div class="col-md-4">
                                    <input type="text" name="gender" class="form-control" placeholder="性别">
                                </div>
                            </div>
                            <div class="form-group has-success has-feedback form-group">
                                <div class="col-md-3">
                                    <input type="text" name="hobby" class="form-control" placeholder="爱好">
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary" id="btn_update">修改</button>
                        </divc>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--导入js文件-->
    <script type="text/javascript" src="component/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="component/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        //1.定义一个json对象
        let student = [
            {
                "id": 1,
                "name": "刘备",
                "birthday": 1998 - 12 - 12,
                "gender": "男",
                "hobby": "做草鞋,内政,联合"
            },
            {
                "id": 2,
                "name": "关羽",
                "birthday": 1999 - 1 - 22,
                "gender": "男",
                "hobby": "买枣，读春秋，练武"
            },
            {
                "id": 3,
                "name": "张飞",
                "birthday": 1999 - 5 - 19,
                "gender": "男",
                "hobby": "卖猪肉，喝酒，打士兵"
            },
            {
                "id": 4,
                "name": "赵云",
                "birthday": 2000 - 6 - 9,
                "gender": "男",
                "hobby": "练武"
            },
            {
                "id": 5,
                "name": "黄忠",
                "birthday": 1980 - 2 - 23,
                "gender": "男",
                "hobby": "射箭，练武"
            },
            {
                "id": 6,
                "name": "马超",
                "birthday": 1998 - 9 - 14,
                "gender": "男",
                "hobby": "打扮，练武"
            }
        ];
        let table = document.querySelector(".table.table-striped");
        document.querySelector(".btn.btn-primary").onclick = function (event) {
            console.log(typeof student);
            console.log(student);

            //把这个json中的数据取出来添加到table中去
            //删除table中除表头之外的所有行
            let tableh = table.rows.length;
            for (let i = 1; i < tableh; i++) {
                table.deleteRow(1);
            }
            //再添加
            for (let i = 0; i < student.length; i++) {
                let tr = "<tr><td>" + student[i].id + "</td><td>" + student[i].name + "</td><td>" + student[i].birthday + "</td><td>" + student[i].gender + "</td><td>" + student[i].hobby +
                    "</td><td><button type='' id=" + student[i].id + " id='update_btn' name='update_btnn' class='btn btn-info'>更新</button><button type='' id=" + student[i].id + " class='btn btn-warning'>删除</button></td></tr>";
                table.insertAdjacentHTML("beforeend", tr);
            }
            update()
            deleteRow()
            // document.querySelector(".btn.btn-info").onclick=function (event){
            // };
            // document.querySelector(".btn.btn-warning").onclick=function (event){
            // };
        }

        document.querySelector(".btn.btn-danger").onclick = function (event) {
            location.reload();
        }

        update = function () {
            document.querySelectorAll(".btn.btn-info").forEach(function (item) {
                item.onclick = function (e) {
                    // console.log(this.id);
                    // console.log(document.querySelector("input[name='id']"));
                    let person = {};
                    for (let i = 0; i < student.length; i++) {
                        if (student[i].id == this.id) {
                            person = student[i];
                            break;
                        }
                    }
                    document.querySelector("input[name='id']").value = person.id
                    document.querySelector("input[name='name']").value = person.name
                    document.querySelector("input[name='birthday']").value = person.birthday
                    document.querySelector("input[name='gender']").value = person.gender
                    document.querySelector("input[name='hobby']").value = person.hobby
                }
            })
        }

        deleteRow = function () {
            document.querySelectorAll(".btn.btn-warning").forEach(function (item) {
                item.onclick = function (e) {
                    let index = 0;
                    for (let i = 0; i < student.length; i++) {
                        if (student[i].id == this.id) {
                            index = i;
                            break;
                        }
                    }
                    student.splice(index, 1);
                    console.log(student);
                    table.innerHTML = ""
                    for (let i = 0; i < student.length; i++) {
                        let tr = "<tr><td>" + student[i].id + "</td><td>" + student[i].name + "</td><td>" + student[i].birthday + "</td><td>" + student[i].gender + "</td><td>" + student[i].hobby +
                            "</td><td><button type='' id=" + student[i].id + " id='update_btn' name='update_btnn' class='btn btn-info'>更新</button><button type='' id=" + student[i].id + " class='btn btn-warning'>删除</button></td></tr>";
                        table.insertAdjacentHTML("beforeend", tr);
                    }
                    deleteRow()
                    update()
                }
            })
        }

        document.querySelector("#btn_update").onclick = function() {
            let id = document.querySelector("input[name='id']").value
            let name = document.querySelector("input[name='name']").value
            let birthday =  document.querySelector("input[name='birthday']").value
            let gender = document.querySelector("input[name='gender']").value
            let hobby = document.querySelector("input[name='hobby']").value
            if(student) {
                student.forEach(item=>{
                    if(id==item.id) {
                        item.name = name;
                        item.birthday = birthday;
                        item.gender = gender;
                        item.hobby = hobby;
                    }
                })
            }
            console.log(student);
            table.innerHTML = ""
            for (let i = 0; i < student.length; i++) {
                let tr = "<tr><td>" + student[i].id + "</td><td>" + student[i].name + "</td><td>" + student[i].birthday + "</td><td>" + student[i].gender + "</td><td>" + student[i].hobby +
                    "</td><td><button type='' id=" + student[i].id + " id='update_btn' name='update_btnn' class='btn btn-info'>更新</button><button type='' id=" + student[i].id + " class='btn btn-warning'>删除</button></td></tr>";
                table.insertAdjacentHTML("beforeend", tr);
            }
            document.querySelector("input[name='id']").value = ""
            document.querySelector("input[name='name']").value = ""
            document.querySelector("input[name='birthday']").value = ""
            document.querySelector("input[name='gender']").value = ""
            document.querySelector("input[name='hobby']").value = ""
            update()
            deleteRow()
        }

    </script>
</body>

</html>